<template>
  <div class="container">
    <fast-header>忘记密码</fast-header>
    <div class="container-content">
      <ul class="login-ul">
        <li class="login-ul_item"><input ref="tel" type="tel" placeholder="请输入手机号"
                                         @keydown="phoneDown"
                                         @blur="phoneBlur"
                                         @focus="phoneFocus"
                                         v-model="tell">
          <span class="delete-icon" @click="phoneClick" v-show="phoneShow">
              <img src="../assets/icon/delete.png" alt="">
            </span>
        </li>
        <li class="login-ul_item"><input type="text" placeholder="请输入短信验证码">
          <span v-show="showTime" @click="getCode" class="requireCount">获取验证码</span>
          <span v-show="!showTime" class="count">{{count}}后重发</span>
        </li>
        <li class="login-ul_item"><input type="password"
                                         @keydown="pswDown"
                                         @blur="pswBlur"
                                         @focus="pswFocus"
                                         v-model="pswData"
                                         placeholder="请输入6～12位密码"></li>
      </ul>
      <div class="register--button">
        <button class="button" @click="maskLogin">设置密码</button>
      </div>
    </div>

  </div>
</template>
<script>
  import fastHeader from '@pcpt/fast-header'

  export default {
    name: "reset-password",
    data() {
      return {
        phoneShow: false,
        // codeShow: false,
        pswShow: false,
        // 定时器
        showTime: true,
        count: '',
        timer: null,
        // 双向绑定
        tell: '',
        pswData: '',
        // 绑定变色
        boole: false,
      }
    },
    methods: {
      // 弹出提示框
      maskLogin() {
        // this.$popUp({
        //   message: "正在加载中"
        // });
      },
      // 键盘事件
      phoneDown() {
        this.phoneShow = true;
        if (this.tell === '') {
          this.phoneShow = false;
        }
      },
      pswDown() {
        this.pswShow = true;
        if (this.tell === '') {
          this.pswShow = false;
        }
        this.pswShow = true;
      },
      // 失焦事件
      phoneBlur() {
        this.phoneShow = false;
      },
      pswBlur() {
        this.pswShow = false;
      },
      // 聚焦事件
      phoneFocus() {
        if (this.tell.length > 0) {
          this.phoneShow = true;
        } else {
          this.phoneShow = false;
        }
      },
      pswFocus() {
        if (this.pswData.length > 0) {
          this.pswShow = true;
        }
      },
      // 图标全部清除
      phoneClick() {
        this.tell = '';
      },
      pswClick() {
        this.pswData = '';
      },
      // 倒计时
      getCode() {
        const re = /^1[35789]\d{9}$/;
        if (re.test(this.$refs.tel.value)) {
          const TIME_COUNT = 60;
          if (!this.timer) {
            this.count = TIME_COUNT;
            this.showTime = false;
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--;
              } else {
                this.showTime = true;
                clearInterval(this.timer);
                this.timer = null;
              }
            }, 1000)
          }
          this.$api.sendMsg({
            tell: this.tell
          })
            .then(data => {
              console.log(data);
            })
            .catch(error => {
              console.log(error);
            })
        } else {
          console.log('请输入正确的手机号码');
        }
      },
      // 关联事件
      checkedRex() {
        // this.$refs.btnRegister.style.background = '#4aa5fd';
        // 可以灵活使用，避免写死导致执行一次
        this.boole = !this.boole;
        if (this.boole) {
          this.$refs.btnRegister.style.background = '#4aa5fd';
        } else {
          this.$refs.btnRegister.style.background = '#838385'
        }
      },
    },
    components: {fastHeader}
  }
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
  }

  .container {
    background: #fff;
  }

  .container-content {
    border-top: 1px solid #b2b2b2;
  }
  .login-ul {
    display: block;
    padding-top: .18666rem;
  }

  .login-ul li {
    position: relative;
    display: block;
    height: 1.1733rem;
    padding-left: .8rem;
    padding-right: .8rem;
  }

  .login-ul_item::after {
    content: '';
    display: block;
    border-bottom: 1px solid #c8c8cb;
  }
  .requireCount{
    position: relative;
    color: #4aa5fd;
    font-size: .4rem;
    float: right;
    line-height: 1.1733rem;
    padding-right: .4rem;
  }
  .count{
    color: red;
    font-size: .4rem;
    margin-left: 1.2rem;
  }
  .login-ul_item input {
    line-height: 1.1633rem;
    padding-left: .42666rem;
    outline: none;
    font-size: .37333rem;
    color: #c8c8cb;
    border: none;
    padding-right: .42666rem;
  }
  .delete-icon img{
    vertical-align: middle;
    width: .65333rem;
    height: .6rem;
  }
  .delete-icon {
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    right: 1.1rem;
    bottom: .3rem;
  }
  .register--button{
    margin-top: 1rem;
    text-align: center;
  }
  .register--button>button{
    width: 6.88rem;
    line-height: 1.1733rem;
    color: white;
    background: #3c9dfc;
    font-size: .4rem;
    border-radius: .5rem;
    outline: none;
    border: none;
  }
</style>
